<template>
  <view>
    <view class="code-flex-col page">
      <view class="code-flex-col code-flex-1 group_4">
        <view class="code-flex-col code-relative group">
          <view class="code-flex-col section_2">
            <u-swiper :list="actFileList" circular height="320rpx" indicator indicatorMode="line" width="100%" />

            <view class="code-flex-row code-self-stretch group_2">
              <image :src="getPicture(activityParams.actPhoto)" class="code-shrink-0 image_4" />
              <view class="code-ml-10 code-flex-col code-flex-1 group_3 justify-between">
                <view class="code-flex-col">
                  <text class="code-self-stretch font">
                    {{ activityParams.actName }}
                  </text>
                </view>
                <view class="code-flex-row mt-39">
                  <text class="font_2 text_2">
                    ￥{{ activityParams.actMinPrice / 100 }}-{{ activityParams.actMaxPrice / 100 }}
                  </text>
                </view>
              </view>
            </view>
            <view class="group_5 flex items-center justify-between text-[#696975]" @tap="viewActivity">
              <view
                class="text-[#ffffff] pl-2 pr-2 pt-1 pb-1 bg-[#FF4852] flex items-center justify-center rounded text-xs"
              >
                满减
              </view>
              <view class="ml-2 flex-1 text-xs">
                <view>
                  ￥{{ activityParams.actMinPrice / 100 }}票档
                  <text>{{ activityParams.actServe }}</text>
                </view>
              </view>
              <view class="text-xs">查看更多》</view>
            </view>
            <view class="code-self-stretch divider"></view>

            <view class="code-flex-col code-self-start group_5">
              <text class="font_3 text_4">
                {{ formattedDate(activityParams.actStartTime) }}-{{ formattedDate(activityParams.actEndTime) }}
              </text>
              <text class="font_4 mt-5">
                {{
                  `演出时长约${activityParams.activityServeBo.seeMinute}分钟，请演出前${activityParams.activityServeBo.seeIntoMinute}分钟入场`
                }}（以现场为准）
              </text>
            </view>
            <view class="code-self-stretch divider"></view>
            <view class="code-flex-row code-justify-between code-items-center code-self-stretch group_6">
              <view class="flex flex-col justify-between h-full">
                <view class="font_3 text_5">{{ activityParams.actSite }}</view>
                <view class="font_4 text_6 line-clamp-2">武汉市武汉经济技术开发区车城北路58号...</view>
              </view>
              <view class="code-flex-row code-items-center group_8">
                <view class="flex flex-col items-center">
                  <image class="image_6" src="/static/image/activities/seat.png" />
                  <view class="text_8">座位图</view>
                </view>

                <view class="flex flex-col items-center ml-4">
                  <image class="image_6" src="/static/image/activities/location-one.png" />
                  <view class="text_8">14.1km</view>
                </view>
              </view>
            </view>

            <view class="code-flex-row code-justify-between code-items-center code-self-stretch group_9">
              <view class="code-flex-row">
                <text class="font_6 text_9">服务</text>
                <view class="code-flex-row code-shrink-0 ml-15">
                  <image
                    v-if="activityParams.activityServeBo.buyQuitType === 1"
                    class="code-shrink-0 image_8"
                    src="/static/image/activities/selected-icon.png"
                  />
                  <image v-else class="code-shrink-0 image_8" src="/static/image/activities/close-icon.png" />
                  <text class="font_5 ml-3">不支持退</text>
                </view>

                <view class="code-flex-row code-shrink-0 ml-15">
                  <image
                    v-if="activityParams.activityServeBo.buyTicketType === 1"
                    class="code-shrink-0 image_8"
                    src="/static/image/activities/close-icon.png"
                  />
                  <image v-else class="code-shrink-0 image_8" src="/static/image/activities/selected-icon.png" />
                  <text class="code-ml-4 font_5 text_10">电子票</text>
                </view>
                <view class="code-flex-row code-shrink-0 ml-15">
                  <image
                    v-if="activityParams.activityServeBo.buyInvoiceType === 1"
                    class="code-shrink-0 image_8"
                    src="/static/image/activities/close-icon.png"
                  />
                  <image v-else class="code-shrink-0 image_8" src="/static/image/activities/selected-icon.png" />
                  <text class="code-ml-4 font_5 text_11">电子发票</text>
                </view>
              </view>
              <view>></view>
            </view>
          </view>
          <view class="code-mt-6 code-flex-row section_3">
            <view class="code-flex-col code-shrink-0 code-self-start group_11">
              <view class="code-flex-row code-items-baseline">
                <text class="text_13">{{ activityParams.actScore }}</text>
                <text class="code-ml-6 font_7 text_15">极好</text>
              </view>
              <view class="code-flex-row mt-13">
                <image
                  class="image_12"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65727dc75a7e3f0310be272c/6572b290fcfbac001137bd7e/ea1090506e7c10866003e60bde70ab2b.png"
                />
                <image
                  class="code-ml-2 image_13"
                  src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=66f69e952a780d9a30cb949395ba8faf.png"
                />
                <image
                  class="code-ml-2 image_12"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65727dc75a7e3f0310be272c/6572b290fcfbac001137bd7e/49ca80fe9bc43bcf7fdd603714aee538.png"
                />
              </view>
            </view>
            <view class="code-shrink-0 code-self-center section_4"></view>
            <view class="code-flex-col code-flex-1 code-self-center group_10">
              <text class="code-self-start font_7 text_12">8445条评论</text>
              <view class="code-flex-row code-justify-between code-items-center code-self-stretch mt-5">
                <view class="code-flex-row code-items-center">
                  <image
                    class="code-shrink-0 image_10"
                    src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=741b88defc0cf2bd45316eb98d5d3336.png"
                  />
                  <text class="code-ml-4 text_14">麦咖啡拿铁</text>
                  <image
                    class="code-ml-4 code-shrink-0 image_11"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65727dc75a7e3f0310be272c/6572b290fcfbac001137bd7e/2dccf9d092c9426958496b9ef05bb873.png"
                  />
                </view>
                <image
                  class="image_9"
                  src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=16540531317245d0f3ffc5faba2a785e.png"
                />
              </view>
              <text class="code-self-stretch font_6 mt-5">阿信唱歌非常卖力，即使状态不好，我那场也完</text>
              <text class="code-self-stretch font_6 mt-5">全没有躲高音，高音尾音都在很尽力的呈现......</text>
            </view>
          </view>
        </view>
        <view class="code-flex-col section_5">
          <view class="code-flex-col code-self-stretch">
            <u-sticky bgColor="#fff">
              <u-tabs :list="tabsList" @change="viewTab"></u-tabs>
            </u-sticky>
          </view>

          <!--详情-->
          <view v-show="activeIndex === 0">
            <template v-if="actBottomFileList.length">
              <u-image
                v-for="(item, index) in actBottomFileList"
                :key="index"
                :src="item.path"
                height="320rpx"
                width="100%"
              />
            </template>
            <u-empty v-else icon="http://cdn.uviewui.com/uview/empty/car.png" mode="car" />
          </view>

          <!-- 评价-->
          <Evaluate v-show="activeIndex === 1" />

          <!--须知-->
          <Notice v-show="activeIndex === 2" />
        </view>
      </view>
    </view>
    <view class="fixed bottom-0 w-full pl-3 pr-3 flex items-center bg-white p-3">
      <view class="flex flex-col items-center mr-[66rpx]">
        <image class="w-[44rpx] h-[44rpx]" src="/static/image/activities/help.png"></image>
        <view class="text-[#171726]">帮助</view>
      </view>
      <view class="flex flex-col items-center mr-[66rpx]">
        <image class="w-[44rpx] h-[44rpx]" src="/static/image/activities/love.png"></image>
        <view class="text-[#171726]">我想看</view>
      </view>

      <view class="flex-1">
        <view
          class="code-flex-col code-justify-start code-items-center code-self-stretch text-wrapper"
          @tap="routerPath"
        >
          <text class="font_4 text_20">立即购买</text>
        </view>
      </view>
    </view>
    <OfferDescriptionPopup v-model:show="show" :form="activityParams" />
  </view>
</template>

<script lang="ts" setup>
import Evaluate from './components/evaluate.vue';
import Notice from './components/notice.vue';
import OfferDescriptionPopup from './components/offerDescriptionPopup.vue';
import { ACTIVITIES } from '@/api/activities';
import { RequestInterface } from '@/typings/request';
import { onLoad } from '@dcloudio/uni-app';
import { getPicture } from '@/utils/common';
import { formattedDate } from '../../utils/date';
import { useActivtiesStore } from '@/stores/activties';

const activtiesStore = useActivtiesStore();
const $http: RequestInterface = inject('$http') as RequestInterface;

// 头部文件上传
const actFileList = computed(() => {
  const newBkiFileTop = JSON.parse(activityParams.value.actFile || '[]');
  return newBkiFileTop.map((item) => item.path);
});

// 底部文件上传
const actBottomFileList = computed(() => {
  return JSON.parse(activityParams.value.actFileDetails || '[]');
});

const tabsList = [
  {
    name: '详情',
    value: 0
  },
  {
    name: '评价',
    value: 1
  },
  {
    name: '须知',
    value: 2
  }
];

const show = ref(false);

// 查看满减
const viewActivity = () => {
  show.value = true;
};

const activeIndex = ref(0);
const viewTab = (code) => {
  activeIndex.value = code.index;
};

// 立即购买
const routerPath = () => {
  uni.$u.route({
    url: '/pages/activities/confirmOrder',
    params: {}
  });
};

const activityParams = ref({
  activityServeBo: {}
});
// 获取文体详情
const getActivityParams = (id) => {
  console.log(id);
  // 加载loading
  uni.showLoading({
    title: '列表加载中...',
    mask: true
  });
  $http.post({
    url: ACTIVITIES.GET_ACTIVITY,
    data: {
      id
    },
    success: (res) => {
      console.log(res, '成功');
      activityParams.value = res || {};
      activtiesStore.setActivityDetails(res);
    },
    fail: () => {
      activityParams.value = {};
    },
    complete: () => {
      uni.hideLoading();
    }
  });
};

onLoad((query) => {
  const { id } = query;
  getActivityParams(id);
});
</script>

<style lang="scss" scoped>
.mt-5 {
  margin-top: 10rpx;
}

.ml-15 {
  margin-left: 30rpx;
}

.ml-3 {
  margin-left: 6rpx;
}

.mt-13 {
  margin-top: 26rpx;
}

.mt-159 {
  margin-top: 318rpx;
}

.ml-27 {
  margin-left: 54rpx;
}

.page {
  background-color: #fafafb;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .image_7 {
    width: 28rpx;
    height: 24rpx;
  }

  .image_6 {
    width: 32rpx;
    height: 32rpx;
  }

  .group_4 {
    padding-bottom: 12rpx;
    overflow-y: auto;

    .group {
      .section_2 {
        padding-left: 40rpx;
        padding-right: 24rpx;
        background-color: #ffffff;
        border-radius: 0 0 0rpx 0rpx;

        .group_2 {
          margin-top: 20rpx;
          padding-bottom: 20rpx;
          border-bottom: solid 2rpx #e2e2eb;

          .image_4 {
            border-radius: 8rpx;
            width: 144rpx;
            height: 200rpx;
          }

          .group_3 {
            .image_5 {
              width: 20rpx;
              height: 24rpx;
            }

            .font_2 {
              font-size: 32rpx;
              line-height: 22.42rpx;
              font-weight: 700;
              color: #ff4852;
            }

            .text_2 {
              margin-left: 4rpx;
              line-height: 23.74rpx;
            }

            .text_3 {
              margin-left: 8rpx;
              line-height: 23.74rpx;
            }
          }
        }

        .group_5 {
          padding: 24rpx 0;

          .text_4 {
            line-height: 34rpx;
          }
        }

        .divider {
          margin-right: 16rpx;
          background-color: #e2e2eb;
          height: 2rpx;
        }

        .group_6 {
          height: 60rpx;
          margin-top: 22rpx;

          .text_5 {
            line-height: 26.02rpx;
          }

          .group_7 {
            margin-right: 36rpx;
          }
        }

        .group_8 {
          .text_6 {
            line-height: 22.32rpx;
          }

          .text_7 {
            margin-left: 20rpx;
            color: #696975;
          }

          .text_8 {
            color: #696975;
            font-size: 24rpx;
          }
        }

        .group_9 {
          margin-top: 24rpx;
          padding: 24rpx 0;
          border-top: solid 2rpx #e2e2eb;

          .text_9 {
            line-height: 22.12rpx;
          }

          .image_8 {
            width: 20rpx;
            height: 20rpx;
          }

          .text_10 {
            line-height: 22.06rpx;
          }

          .text_11 {
            line-height: 22.46rpx;
          }
        }

        .font_5 {
          font-size: 24rpx;
          font-family: 萍方-简;
          line-height: 22.42rpx;
          color: #171726;
        }
      }

      .section_3 {
        padding: 20rpx 24rpx 20rpx 40rpx;
        background-color: #ffffff;

        .group_11 {
          margin-top: 40rpx;

          .text_13 {
            color: #ff9c4b;
            font-size: 48rpx;
            font-weight: 800;
            line-height: 34.86rpx;
          }

          .text_15 {
            color: #ff9c4b;
            line-height: 18.58rpx;
          }

          .image_12 {
            width: 44rpx;
            height: 18rpx;
          }

          .image_13 {
            width: 20rpx;
            height: 18rpx;
          }
        }

        .section_4 {
          margin-left: 40rpx;
          background-color: #e2e2eb;
          width: 2rpx;
          height: 144rpx;
        }

        .group_10 {
          margin-left: 20rpx;

          .text_12 {
            margin-left: 8rpx;
            color: #696975;
          }

          .image_10 {
            border-radius: 50%;
            width: 28rpx;
            height: 28rpx;
          }

          .text_14 {
            color: #696975;
            font-size: 20rpx;
            font-weight: 800;
            line-height: 18.86rpx;
          }

          .image_11 {
            width: 116rpx;
            height: 18rpx;
          }
        }

        .font_7 {
          font-size: 20rpx;
          line-height: 18.48rpx;
          font-weight: 300;
        }
      }

      .image_9 {
        margin-right: 16rpx;
        width: 8rpx;
        height: 16rpx;
      }

      .font_6 {
        font-size: 24rpx;
        line-height: 28rpx;
        font-weight: 800;
        color: #171726;
      }
    }

    .section_5 {
      padding: 28rpx 40rpx 54rpx;
      background-color: #ffffff;

      .group_12 {
        padding-bottom: 16rpx;

        .text_16 {
          color: #0064ff;
          line-height: 29.5rpx;
        }

        .font_8 {
          font-size: 28rpx;
          font-weight: 800;
          color: #696975;
        }

        .text_17 {
          margin: 0 4rpx;
          line-height: 26.04rpx;
        }

        .text_18 {
          margin: 0 4rpx;
          line-height: 25.84rpx;
        }
      }

      .section_6 {
        background-color: #0064ff;
        border-radius: 8rpx;
        width: 64rpx;
        height: 8rpx;
      }

      .text_19 {
        margin-top: 44rpx;
        color: #ff4852;
        line-height: 25.88rpx;
      }
    }

    .font {
      font-size: 32rpx;
      line-height: 38rpx;
      font-weight: 800;
      color: #171726;
    }

    .font_3 {
      font-size: 28rpx;
      font-weight: 800;
      color: #171726;
    }

    .font_4 {
      font-size: 24rpx;
      font-weight: 300;
      color: #696975;
    }
  }
}

.text-wrapper {
  padding: 28rpx 0;
  background-color: #0064ff;
  border-radius: 40rpx;

  .text_20 {
    color: #ffffff;
    line-height: 21.98rpx;
  }
}
</style>
